<template>
  <div class="upload-img-list">
    <ul>
      <li v-for="(imgUrl, index) in imgUrlList">
        <img class="delete" src="../../assets/img/appraise/appraise_upload_img_delete_icon.png" alt=""
             @click="deleteImg(index)">
        <img v-bind:src="imgUrl" alt="" @click="imgClick(index)">
      </li>
      <li>
        <input type="button" id="upload-click">
        <input type="file" id="upload-input" accept="image/jpg,image/png,image/jpeg,image/gif"
               @change="imgSelected($event)" multiple="multiple" aria-valuemax="5">
      </li>
    </ul>
    <div class="big-img-div" v-if="isShowBigImg" ref="bigImageDiv" @touchmove.prevent
         @click="bigImageClick">
      <img v-bind:src="showUrl" alt="">
    </div>
  </div>
</template>
<script>
  import * as recommend from 'api/recommend'
  import BackNavigation from '../mine/navigation.vue'
  import lrz from "lrz"

  export default {
    name: 'upload-img-list',
    model: {
      prop: 'imgDataList',
      event: 'change'
    },
    components: {
      BackNavigation
    },
    data: function () {
      return {
        titleInfo: {
          leftTitle: '返回',
          title: '上传照片',
          rightTitle: ''
        },
        isShowBigImg: false,
        showUrl: '',
        imgDataFileList: [],  // 评价图片数组
        imgUrlList: []        // 评价图片url数组
      }
    },
    watch: {
      imgUrlList (newValue, oldValue) {
        this.$emit('change', newValue)
      },
      imgDataFileList (newValue, oldValue) {
        this.$emit('send-files', newValue)
      }
    },
    methods: {
      imgSelected (e) {
        let self = this
        const imgMasSize = 1024 * 1024 * 10 // 10MB
        // 获取当前选中的文件
        for (let fileItem of e.target.files) {
          // 检查文件类型
//          if (['jpeg', 'png', 'gif', 'jpg'].indexOf(fileItem.type.split('/')[1]) < 0) {
//            // 自定义报错方式
//            this.$toast({
//              message: '图片类型错误',
//              position: 'middle',
//              duration: 1000,
//              className: 'toast'
//            })
//            return
//          }
//          // 文件大小限制
//          if (fileItem.size > imgMasSize) {
//            // 文件大小自定义限制
//            this.$toast({
//              message: '图片过大',
//              position: 'middle',
//              duration: 1000,
//              className: 'toast'
//            })
//            return
//          }
          lrz(fileItem, {quality: 0.3})
            .then((rst) => {
              // 处理成功会执行
              self.imgUrlList.push(rst.base64)
              self.imgDataFileList.push(rst.base64)
            })
            .catch((err) => {
              // 处理失败会执行
              console.log(err)
            })
            .always(() => {
              // 不管是成功失败，都会执行
            })
        }
      },
      selectedClick (keyInfo) {
        keyInfo.selected = !keyInfo.selected
        if (keyInfo.selected) {
          this.appraiseSelectedKeyList.push(keyInfo.title)
        }
      },
      imgClick (index) {
        console.log('imgClick')
        this.showUrl = this.imgUrlList[index]
        this.isShowBigImg = true
      },
      deleteImg (index) {
        this.imgDataFileList.splice(index, 1)
        this.imgUrlList.splice(index, 1)
      },
      bigImageClick () {
        this.isShowBigImg = false
      }
    },
    created () {
    },
    mounted () {
    }
  }
</script>

<style lang="scss">
  div.upload-img-list {
    position: relative;
    box-sizing: border-box;
    padding: 0 15px 10px 15px;
    width: 100%;
    height: auto;
    overflow: hidden;
    background-color: white;

      >ul {
        overflow: hidden;
        width: 100%;
        height: auto;

        >li:last-child {
          margin-left: 0;
        }

        >li {
          position: relative;
          float: left;
          margin-right: 5%;
          margin-top: 10px;
          background-color: rgb(233, 233, 233);
          width: 80px;
          height: 80px;

          >img.delete {
            z-index: 0;
            position: absolute;
            top: -5px;
            right: -5px;
            height: 20px;
            width: 20px;
          }

          >img:last-child {
            height: 100%;
            max-width: 100%;
          }

          >input:first-child {
            outline: none;
            float: left;
            background-image: url("../../assets/img/appraise/appraise_upload_img_icon.png");
            width: 80px;
            height: 80px;
            border: 0 solid transparent;
            background-color: white;
            -webkit-appearance: none;  /*去掉苹果的默认UI来渲染按钮*/
            background-repeat: no-repeat;
            background-size: 100% 100%;
            background-position:left;
            background-origin: content-box;
            text-align: right;
          }

          >input:last-child {
            /*display: none;*/
            opacity: 0.0;
            left: 0;
            width: 80px;
            height: 80px;
            overflow: hidden;
            position: absolute;
            background-color: #0a9de1;
          }
        }
      }

    >div.big-img-div {
      top: 0;
      left: 0;
      background-color: rgba(0, 0, 0, 0.5);
      width: 100%;
      height: 100%;
      z-index: 66;
      overflow: scroll;
      position: fixed;

      >img {
        position: absolute;
        /*overflow: scroll;*/
        top: 50%;
        left: 50%;
        /*transform: translateX(-50%);*/
        transform: translate(-50%, -50%);
        border: 0 solid rgb(233, 233, 233);
        padding: 0;
        background-color: white;
        max-width: 100%;
        max-height: 100%;
        /*min-width: 100%;*/
        height: auto;
        /*width: 100%;*/
      }
    }
  }
</style>
